<template>
  <div class="wrapper_content">
    <div class="title ">项目总览</div>
    <div class="wrapper_overView">
      <div class="left">
        <div class="list">
          <div v-for="(item, index) of titles" :key="index" class="item">
            <div class="item_title">{{ item.title }}</div>
            <div class="item_num" :style="{ color: color[index]}"
             >{{ dataSource[index] }}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div id="charts"></div>
      </div>
    </div>
  </div>

</template>

<script>
const echarts = require('echarts')
export default {
  data() {
    return {
      // titles
      color:['#3F9EFF','#3F9EFF','#3F9EFF','#6DD400','#3F9EFF','#FA6400']
    }
  },
  props: {
    dataSource: {
      type: Array,
      default() {
        return ['200', '3', '4', '5', '3']
      }
    },
    titles: {
      type: Array,
      default () {
        return [
          {
            title: '总项目'
          },
          {
            title: '未发布'
          },
          {
            title: '进行中'
          },
          {
            title: '已完成'
          },
          {
            title: '未启动'
          },
          {
            title: '延期预警'
          }
        ]
      }
    }
  },
  mounted() {
    this.init()
      // console.log("ssssss",this.dataSource)
  },
    watch:{
        dataSource:  {
            handler(newName, oldName) {
                this.initCharts(newName)
            }

        }
    },
  methods: {
    init() {
      this.initCharts()
    },
    initCharts(dataSource = []) {
      const rest = this.dataSource[0] - this.dataSource[2]
      const rest2 = this.dataSource[0] - this.dataSource[4]
      const rest3 = this.dataSource[0] - this.dataSource[3]
      // const data = [
      //   {
      //     name: 'Apples',
      //     value: 0
      //   },
      //   {
      //     name: '全部',
      //     value: 99
      //   }
      // ]
      const option = {
        color: ['#E9F2FB', '#0C64EC'],
        series: [
          {
            type: 'pie',
            radius : [50, 60],
            center: ['50%', '50%'],
            data: [rest == 0 ? 1 : rest, this.dataSource[3]],
            color:['red','green'],
            animation: false,
              itemStyle: {
              normal: {
              color: function(params) {
                      //自定义颜色
                    var colorList = ['#F6F6F6','#6DD400' ];
                    return colorList[params.dataIndex]
                  }
              }
            },
            // hoverOffset: 0,
            label: {
              position: 'center',
              formatter: [
                '{a|已完成}',
                `{b|`+`${this.dataSource[0] ? Math.round(this.dataSource[3]/this.dataSource[0]*100) : 0 }`+`}{x|%}`
              ].join('\n'),
              rich: {
                a: {
                  color: '#AAAAAA',
                  fontSize: 12,
                },
                b: {
                  height: 40,
                  fontSize: 23,
                  color:"#6DD400"
                },
                x: {
                  fontSize: 23,
                  fontFamily: 'Microsoft YaHei',
                  borderColor: '#449933',
                  borderRadius: 4,
                  color:"#6DD400"
                }

              }
            },
            left: 0,
            right: '66.6667%',
            top: 0,
            bottom: 0,
            emphasis: {
               shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(30, 144, 255，0.5)',
              label: {
                rich: {
                  a: {
                    color: '#AAAAAA',
                    fontSize: 12,
                  },
                  b: {
                    height: 40,
                    fontSize: 23,
                    color:"#6DD400"
                  },
                  x: {
                    fontSize: 23,
                    fontFamily: 'Microsoft YaHei',
                    borderColor: '#449933',
                    color:"#6DD400",
                    borderRadius: 4
                  }
                }
              }
            }
          },
          {
            type: 'pie',
            radius : [50, 60],
            center: ['50%', '50%'],
            data: [ rest2 == 0 ? 1 : rest2,this.dataSource[5]],
            animation: false,
            itemStyle: {
              normal: {
              color: function(params) {
                      //自定义颜色
                    var colorList = ['#F6F6F6','#FA6400' ];
                    return colorList[params.dataIndex]
                  }
              }
            },
            hoverOffset: 0,
            label: {
              position: 'center',

              formatter: [
                '{a|延期率}',
                `{b|`+`${this.dataSource[0] ? Math.round(this.dataSource[5]/this.dataSource[0]*100) : 0 }`+`}{x|%}`
              ].join('\n'),
              rich: {
                a: {
                  color: '#AAAAAA',
                  fontSize: 12,
                },
                b: {
                  height: 40,
                  fontSize: 23,
                  color: '#FA6400',
                },
                x: {
                  fontSize: 23,
                  fontFamily: 'Microsoft YaHei',
                  borderColor: '#449933',
                  color: '#FA6400',
                  borderRadius: 4
                }
              }
            },
            left: '33.3333%',
            right: '33.3333%',
            top: 0,
            bottom: 0
          },
            {
                type: 'pie',
                radius : [50, 60],
                center: ['50%', '50%'],
                data: [ rest3 == 0 ? 1 : rest3,this.dataSource[4]],
                animation: false,
                itemStyle: {
                  normal: {
                  color: function(params) {
                          //自定义颜色
                        var colorList = ['#F6F6F6','#3F9EFF' ];
                        return colorList[params.dataIndex]
                      }
                  }
                },
                hoverOffset: 0,
                label: {
                    position: 'center',
                    formatter: [
                        '{a|未开工}',
                        `{b|`+`${this.dataSource[0] ? Math.round(this.dataSource[4]/this.dataSource[0]*100) : 0 }`+`}{x|%}`
                    ].join('\n'),
                    rich: {
                        a: {
                            color: '#AAAAAA',
                            fontSize: 12,
                        },
                        b: {
                            height: 40,
                            fontSize: 23,
                            color:"#3F9EFF"
                        },
                        x: {
                            fontSize: 23,
                            fontFamily: 'Microsoft YaHei',
                            borderColor: '#449933',
                            borderRadius: 4,
                            color:"#3F9EFF"
                        }
                    }
                },
                left: '66.6667%',
                right: 0,
                top: 0,
                bottom: 0
            }


        ]
      }
      // console.log(echarts)
      const myChart = echarts.init(document.getElementById('charts'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }



  }
}
</script>

<style lang="scss" scoped>
.wrapper_content{
  display: flex;
  flex-direction: column;
  .title{
    // padding-left: 20px;
    margin-bottom: 20px;
  }
  .wrapper_overView{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    background: white;
    .left{
      flex: 1;
      padding: 40px;
      display: flex;
      position: relative;
      &::after{
        position: absolute;
        content: "";
        width: 0px;
        height: 100px;
        top: 50%;
        border-right: 1px solid #ccc;
        right: 10px;
        border-color: #F2F2F2;
        transform: translateY(-50%);
      }
      .list{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-self: center;
        .item{
          display: flex;
          flex-direction: column;
          align-items: center;
          &_title{
            font-size: 14px;
            color: #333333;
          }
          &_num{
            color: #333333;
            font-weight: bold;
            font-size: 26px;
            margin-top: 10px;
          }
        }
      }
    }
    .right{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      #charts{
        height: 200px;
        width: 500px;
        // border: 1px solid #ccc;
      }
    }
  }
}
.defaultCircle{
  position: relative;
  &::before{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7F7F7F;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
}
</style>
